<template>
	<div class="app-container">
		<el-form ref="ruleForm" :model="form" :rules="rules" label-width="150px">
			<el-form-item label="品牌系列">
				<el-input style="width: 200px;" type="text" v-model="selectedBrandName" @focus="brandNameFocus"></el-input>
			</el-form-item>
			<el-form-item label="属性" prop="goodsAttributeRealId">
				<el-select style="width: 200px;" v-model="form.goodsAttributeRealId">
					<el-option v-for="(item, index) in attributeRealList" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="分类" prop="goodsTypeId">
				<el-select style="width: 200px;" v-model="form.goodsTypeId" @change="changeGoodsType">
					<el-option v-for="(item, index) in goodsTypeList" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="中文名" prop="name">
				<el-input style="width: 550px;" :disabled="orderGoodsCount > 0" v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="标签名" prop="labelName">
				<el-input style="width: 550px;" v-model="form.labelName"></el-input>
			</el-form-item>
			<el-form-item label="英文名" prop="englishName">
				<el-input style="width: 550px;" v-model="form.englishName"></el-input>
			</el-form-item>
			<el-form-item label="产品编号" prop="no">
				<el-input style="width: 550px;" :disabled="orderGoodsCount > 0" v-model="form.no" @blur="handleBlurNo"></el-input>
			</el-form-item>
			<el-form-item label="规格" :disabled="orderGoodsCount > 0" prop="spec">
				<el-input style="width: 550px;" v-model="form.spec"></el-input>
			</el-form-item>
			<el-form-item label="最低订量">
				<el-input style="width: 200px;" :min="0" v-model="form.minNumber"></el-input>
			</el-form-item>
			<el-form-item label="标准规格(宽)" prop="specWidth" v-if="form.goodsTypeId == 1 || form.goodsTypeId == 2">
				<el-input style="width: 200px;" :min="1" :max="999" :disabled="orderGoodsCount > 0" v-model="form.specWidth" @input="validateInputSpecWidth"></el-input>
			</el-form-item>
			<el-form-item label="标准规格(长)" prop="specLong" v-if="form.goodsTypeId == 1 || form.goodsTypeId == 2">
				<el-input style="width: 200px;" :min="1" :max="999" :disabled="orderGoodsCount > 0" v-model="form.specLong" @input="validateInputSpecLong"></el-input>
			</el-form-item>
			<el-form-item label="单位" prop="unit">
				<el-select style="width: 200px;" v-model="form.unit">
					<el-option label="SET" value="SET"></el-option>
					<el-option label="PCS" value="PCS"></el-option>
				</el-select>
				<!-- <el-input style="width: 200px;" v-model="form.unit"></el-input> -->
			</el-form-item>
			<!-- 商品属性（皮号和布号等，注：软床才显示）begin -->
			<el-form-item v-if="(form.goodsTypeId == 2 || form.goodsTypeId == 4) && form.isHasCustomized == 1" v-for="(item, index) in attributeTypeList" :label="'默认' + item.name" prop="goodsAttributeId">
				<span v-for="(item2, index2) in attributeList" v-bind:key="index2" style="padding-left: 8px;display: block;">
					<el-radio v-for="(item3, index3) in item2" v-if="item3.goodsAttributeTypeId == item.id" :disabled="orderGoodsCount > 0" v-model="form.goodsAttributeId" :label="item3.id" :style="[{color: attributeColor[index2] == null?'':attributeColor[index2].color}, {width: '130px'}]">{{ item3.name }}-{{ item3.no }}</el-radio>
				</span>
			</el-form-item>
			<!-- 商品属性（皮号和布号等，注：软床才显示）end -->
			<el-form-item label="标准件结构" prop="goodsStructureId" v-if="form.goodsTypeId == 2 && form.isHasCustomized == 1">
				<el-radio-group :disabled="orderGoodsCount > 0" v-model="form.goodsStructureId">
				    <el-radio v-for="(item, index) in structureList" :label="item.id">{{ item.name }}-{{ item.no }}</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="标准件料别" prop="goodsMaterialTypeId" v-if="(form.goodsTypeId == 2 || form.goodsTypeId == 4) && form.isHasCustomized == 1">
				<el-radio-group :disabled="orderGoodsCount > 0" v-model="form.goodsMaterialTypeId">
				    <el-radio v-for="(item, index) in materialTypeList" :label="item.id">{{ item.name }}-{{ item.no }}</el-radio>
				</el-radio-group>
			</el-form-item>
			<!-- 商品床脚（例如：五金或油漆，注：软床才显示）begin -->
			<el-form-item v-for="(item, index) in bedFootTypeList" :label="'标准件' + item.name" v-if="form.goodsTypeId == 2 && form.isHasCustomized == 1">
				<el-radio v-for="(item2, index2) in bedFootList" v-if="item2.isSpecial == 0 && item2.bedFootTypeId == item.id" :disabled="orderGoodsCount > 0" v-model="form.goodsBedFootId" :label="item2.id" style="width: 220px">{{ item2.name }}-{{ item2.height }}cm{{ item2.isSpecial == 1?"（专用）":"" }}-{{ item2.no }}</el-radio>
				<!-- <span style="padding-left: 30px;">
					<span style="padding-right: 15px;color: red;">专用</span>
					<el-radio v-for="(item2, index2) in bedFootList" v-if="item2.isSpecial == 1 && item2.bedFootTypeId == item.id" v-model="form.goodsBedFootId" :label="item2.id">{{ item2.name }}-{{ item2.height }}cm</el-radio>
				</span> -->
			</el-form-item>
			<!-- 商品床脚（例如：五金或油漆，注：软床才显示）end -->
			<el-form-item label="显示长宽规格选项?" class="formItemIsClass" v-if="(form.goodsTypeId == 2 || form.goodsTypeId == 4)">
				<el-radio-group :disabled="orderGoodsCount > 0" v-model="form.isShowLogWidth">
				    <el-radio :label="1">是</el-radio>
				    <el-radio :label="0">否</el-radio>
				</el-radio-group>
				<div style="font-size: 12px;color: goldenrod;">显示床垫/大床长宽规格选择项，进口床垫请不要选择《是》，否则计价不正确</div>
			</el-form-item>
			<el-form-item label="可定制?" class="formItemIsClass" v-if="form.goodsTypeId == 1 || form.goodsTypeId == 2 || form.goodsTypeId == 4">
				<el-radio-group v-model="form.isHasCustomized">
				    <el-radio :label="1">是</el-radio>
					<el-radio :label="2">否</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="床头柜:左或右" class="formItemIsClass">
				<el-radio-group v-model="form.bedsideTableDirection">
				    <el-radio :label="1">左</el-radio>
				    <el-radio :label="0">右</el-radio>
				</el-radio-group>
			</el-form-item>
			
			<!-- 产地 begin -->
			<el-form-item label="产地">
				<el-input style="width: 550px;" type="text" placeholder="请输入产地" v-model="form.producer"></el-input>
			</el-form-item>
			<!-- 产地 end -->
			<!-- 零售价 begin -->
			<el-form-item label="零售价" prop="retailPrice">
				<el-input style="width: 200px;" placeholder="请输入零售价" prefix-icon="el-icon-sell" v-model="form.retailPrice" @input="validateInputRetailPrice"></el-input>
			</el-form-item>
			<!-- 零售价 end -->
			
			<!-- 市场价 begin -->
			<el-form-item label="市场价" prop="price">
				<el-input style="width: 200px;" placeholder="请输入市场价" prefix-icon="el-icon-sell" v-model="form.price" @input="validateInputPrice"></el-input>
			</el-form-item>
			<!-- 市场价 end -->
			<!-- 库存 begin -->
			<el-form-item label="库存">
				<el-input style="width: 200px;" placeholder="请输入库存" prefix-icon="el-icon-sell" v-model="form.residue" @input="validateInputResidue"></el-input>
			</el-form-item>
			<!-- 库存 end -->
			<!-- 首页&列表&小图begin -->
			<el-form-item label="首页&列表&小图" prop="pictureUrl">
				<!-- <div class="zdy-img-box" style="align-items: flex-start;">
					<el-image
					  style="width: 100px; height: 100px"
					  :src="form.pictureUrl"></el-image>
					  <div class="zdy-upload-button">
						  <el-button size="mini">上传图片</el-button>
					  </div>
				</div> -->
				<ImageUpload :limit="1" :value="form.pictureUrl" @input="handleGetPictureUrl" :fileSize="0.5"></ImageUpload>
			</el-form-item>
			<!-- 首页&列表&小图 end -->
			<!-- 商品明细-主图 begin -->
			<el-form-item label="商品明细-主图" prop="pictures">
				<div style="display: flex;">
					<div class="zdy-img-box">
						<ImageUpload :limit="1" :value="form.goodsDetails.picture" @input="handleGetPicture" :fileSize="0.8"></ImageUpload>
					</div>
					<div class="zdy-img-box">
						<ImageUpload :limit="1" :value="form.goodsDetails.picture2" @input="handleGetPicture2" :fileSize="0.8"></ImageUpload>
					</div>
					<div class="zdy-img-box">
						<ImageUpload :limit="1" :value="form.goodsDetails.picture3" @input="handleGetPicture3" :fileSize="0.8"></ImageUpload>
					</div>
					<div class="zdy-img-box">
						<ImageUpload :limit="1" :value="form.goodsDetails.picture4" @input="handleGetPicture4" :fileSize="0.8"></ImageUpload>
					</div>
					<div class="zdy-img-box">
						<ImageUpload :limit="1" :value="form.goodsDetails.picture5" @input="handleGetPicture5" :fileSize="0.8"></ImageUpload>
					</div>
					<div class="zdy-img-box">
						<ImageUpload :limit="1" :value="form.goodsDetails.picture6" @input="handleGetPicture6" :fileSize="0.8"></ImageUpload>
					</div>
				</div>	
			</el-form-item>
			<!-- 商品明细-主图 end -->
			<!-- 商品明细-颜色片 begin -->
			<el-form-item label="商品明细-颜色图" prop="goodsColorPictureList">
				<!-- <ImageUpload :limit="20" :value="form.goodsColorPictureListArr" @input="handleGetgoodsColorPictureList"></ImageUpload> -->
				<div style="display: flex;">
					<div style="margin-right: 10px;position: relative;" v-for="(item, index) in form.goodsColorPictureList">
						<i class="el-icon-close close-btn" @click="closeRowGoodsColorPictureList(index)"></i>
						<div style="height: 25px;color: #333333;font-size: 12px;">颜色：<span :style="{color: item.colorNo}">{{ item.colorName }}</span></div>
						<div style="height: 30px;color: #333333;font-size: 12px;">代码：<span :style="{color: item.colorNo}">{{ item.colorNo }}</span></div>
						<div>
							<el-image
							  style="width: 100px; height: 100px"
							  :src="baseUrl + item.url"></el-image>
						</div>
					</div>
					<div class="zdy-upload-button">
						<el-button size="mini" @click="openColorPictureDialog">上传图片</el-button>
					</div>
				</div>
			</el-form-item>
			<!-- 是否区分独立系列 begin -->
			<el-form-item label="是否区分独立系列">
				<el-switch
					v-model="isSplitSingleBrandPerson"></el-switch>
			</el-form-item>
			<!-- 是否区分独立系列 end -->
			<!-- 商品明细-颜色片 end -->
			<el-form-item label="参数说明详情" prop="goodsColorPictureList">
				<el-switch
					v-model="paramDetailsSwitch"></el-switch>
			</el-form-item>
			<!-- 参数说明 begin -->
			<el-form-item v-if="paramDetailsSwitch" label="参数说明" prop="paramIllustrate">
				<editor v-model="form.goodsDetails.paramIllustrate" :min-height="192"/>
			</el-form-item>
			<!-- 参数说明 end -->
			<!-- 售后服务描述 begin -->
			<el-form-item v-if="paramDetailsSwitch" label="售后服务描述" prop="afterSalesDescribe">
				<editor v-model="form.goodsDetails.afterSalesDescribe" :min-height="192"/>
			</el-form-item>
			<!-- 售后服务描述 end -->
			<!-- 参数说明 begin -->
			<el-form-item v-if="paramDetailsSwitch" label="小程序端描述" prop="appletDescribe">
				<editor v-model="form.goodsDetails.appletDescribe" :min-height="192"/>
			</el-form-item>
			<!-- 参数说明 end -->
			<!-- 参数说明 begin -->
			<el-form-item v-if="paramDetailsSwitch" label="PC端描述" prop="pcDescribe">
				<editor v-model="form.goodsDetails.pcDescribe" :min-height="192"/>
			</el-form-item>
			<!-- 参数说明 end -->
		</el-form>
		
		<div slot="footer" class="footer">
			<el-button type="primary" v-hasRole="['admin', 'chanpin']" @click="handleComitGoods('ruleForm')">确 定</el-button>
			<el-button icon="el-icon-back" @click="handleCancel">返回</el-button>
		</div>
		
		<!-- 选择品牌系列 begin -->
		<el-dialog :title="brandDialogTitle" :visible.sync="openBrandDialog" width="600px" append-to-body>
			<div style="display: flex;justify-content: flex-end;">
				<el-button size="mini" type="primary" @click="clearSelectionBrandPerson">取消选中</el-button>
			</div>
			<div class="goodsSeriesDialogBox">
				<div>
					<el-table :data="brandList" :cell-style="cellStyle" ref="brandTable" highlight-current-row @current-change="handleCurrentChange">
						<el-table-column label="名称" align="center" prop="name" width="150" />
					</el-table>
				</div>
				<div class="right-box">
					<span v-if="brandPersonList.length <= 0">没有数据</span>
					<el-radio-group v-model="selectedBrandPersonId">
					    <el-radio v-for="(item, index) in brandPersonList" :label="item.id" style="margin-bottom: 10px;">{{ item.name }}</el-radio>
					</el-radio-group>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button v-hasRole="['chanpin']" type="primary" @click="brandSubmitForm">确 定</el-button>
				<el-button @click="brandCancel">取 消</el-button>
			</div>
		</el-dialog>
		<!-- 选择品牌系列 end -->
		
		<!-- 选择商品明细-颜色 begin -->
		<el-dialog :title="colorPictureTitle" :visible.sync="showColorPictureDialog" width="600px" append-to-body>
			<div>
				<div class="goodsSeriesDialogBox mb10">
					<el-input type="text" placeholder="请输入颜色名称" v-model="selectedColorName"></el-input>
					<el-color-picker v-model="selectedColor"></el-color-picker>
				</div>
				<ImageUpload :limit="1" :value="selectedColorPicture" @input="handleGetColorPicture" :fileSize="0.8"></ImageUpload>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="colorPictureSubmitForm">确 定</el-button>
				<el-button @click="showColorPictureDialog = false">取 消</el-button>
			</div>
		</el-dialog>
		<!-- 选择商品明细-颜色 end -->
	</div>
</template>

<script>
	// 品牌
	import { getBarandList, getBrandPersonList } from "@/api/goods/brand"
	
	// import { getAttributeRealList } from "@/api/goods/attributeReal";
	
	import { getGoodsTypeList } from "@/api/goods/goodsType"
	
	import { queryByPage } from "@/api/goods"
	// // 属性（皮号或布号）
	// import { getAttributeList, getAttributeTypeList } from "@/api/goods/attributeType";
	// // 结构
	// import { getStructureList } from "@/api/goods/structure";
	// // 料别
	// import { getMaterialTypeList } from "@/api/goods/materialType";
	// // 床脚
	// import { getBedFootList, getBedFootTypeList } from "@/api/goods/bedFoot";
	// // 商品
	// import { insertGoods, updateGoods, getGoodsById } from "@/api/goods/goods";
	
	// import { getOrderGoodsCountByGoodsId } from "@/api/order/order"
	
	// import { checkPermi, checkRole } from "@/utils/permission"
	export default{
		data(){
			return{
				form: {
					id: null,
					name: "",
					spec: "",
					mattressStandardHeight: null,
					unit: "",
					price: null,
					url: "",
					details: "",
					goodsTypeId: null,
					status: null,
					brandId: null,
					brandPersonId: null,
				}
			}
		},
		mounted() {
			let that = this
		},
		methods: {
			handleQueryByPage(){
				let that = this
				queryGoodsTypeByPage().then(res => {
					that.loading = false
					let goodsTypeList = res.rows
					that.goodsTypeList = goodsTypeList
					that.total = res.total
					if(goodsTypeList.length > 0) {
						let goodsType = goodsTypeList[0]
						that.setCurrent(goodsType)
					} else {
						that.loading2 = false
					}
				}).catch((e) => {
					console.log(e)
				});
			}
		}
	}
</script>

<style lang="scss">
	.component-upload-image {
		.hide{
			width: 148px;
			height: 148px;
		}
	}
	.app-container{
		background-color: #ffffff;
	}
	.goodsSeriesDialogBox {
		display: flex;
		.right-box {
			flex: 1;
			padding-left: 20px;
		}
	}
	
	::v-deep .formItemIsClass {
		.el-form-item__label{
		  color: red;
		}
	}
	
	.zdy-img-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-left: 10px;
		padding-right: 10px;
	}
	.zdy-upload-button {
		display: flex;
		align-items: center;
		padding-top: 10px;
	}
	
	.footer {
		display: flex;
		justify-content: center;
	}
	
	
	.close-btn {
		position: absolute;
		right: 10px;
		top: 10px;
		cursor: pointer;
	}
	
	.span-label{
		padding-left: 20rpx;
	}
</style>